import React,{useRef,useEffect} from 'react'
import {$totalPrice} from '../../api/typeApi'
import './TotalPrice.scss'
import * as echarts from 'echarts'
export default function TotalPrice() {
    let refDiv=useRef()
    useEffect(()=>{
        var myChart=echarts.init(refDiv.current);
        $totalPrice().then(ret=>{
            let roomtypeNames=ret.map(r=>r.roomtypeName)
            let values=ret.map(r=>r.totalMoney)
            myChart.setOption({
                title: {
                  text: '房间类型销售额统计'
                },
                grid:{
                    innerWidth:'1000px',
                    top:'10%',
                    left:'5%',
                    right:'10%',
                    bottom:'10%'
                },
                tooltip: {},
                xAxis: {
                  data: roomtypeNames
                },
                yAxis: {},
                series: [
                  {
                    name: '销售额',
                    type: 'bar',
                    data: values
                  }
                ]
              });
        })
        
    },[])

  return (
    <div className='charts' ref={refDiv}>

    </div>
  )
}
